<template>
  <mt-navbar title="新增账户"> </mt-navbar>
  <view class="safety-150">
    <view class="forms pt-16rpx">
      <uv-form ref="formRef" label-position="left" label-width="200rpx" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="no-border bg-#ffffff mb-24rpx">
          <uv-form-item label="账号类型：" prop="accountType" required>
            <uv-radio-group v-model="modelForm.accountType" @change="handleRebateChange">
              <!-- <uv-radio :custom-style="{ margin: '8px' }" label="微信" :name="1"> </uv-radio> -->
              <uv-radio :custom-style="{ margin: '8px' }" label="支付宝" :name="2"> </uv-radio>
            </uv-radio-group>
          </uv-form-item>
        </view>
        <view class="bg-#ffffff">
          <uv-form-item label="账号名称：" prop="withdrawAccountName" required>
            <uv-input v-model="modelForm.withdrawAccountName" maxlength="20" placeholder="请输入账号名称" border="none" clearable></uv-input>
          </uv-form-item>
          <view class="no-border">
            <uv-form-item label="账号：" prop="withdrawAccount" required>
              <uv-input v-model="modelForm.withdrawAccount" maxlength="20" placeholder="请输入账号" border="none" clearable></uv-input>
            </uv-form-item>
          </view>
        </view>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="flex-1" @click="handleSubmit">保存</mt-button>
    </view>
  </view>
</template>

<script setup>
import { withdrawalAccountaddOrUpdateWithdrawAccountApp } from '@/subCommission/api/index';

const formRef = ref();
const modelForm = ref({
  accountType: 2,
  withdrawAccountName: '',
  withdrawAccount: ''
});
const rules = {
  accountType: {
    type: 'number',
    required: true,
    message: '请选择账号类型',
    trigger: ['change']
  },
  withdrawAccountName: [
    {
      type: 'string',
      required: true,
      message: '请输入账号名称',
      trigger: ['blur']
    }
  ],
  withdrawAccount: [
    {
      type: 'string',
      required: true,
      message: '请输入账号',
      trigger: ['blur']
    }
  ]
};

function handleRebateChange() {
  modelForm.value.withdrawAccountName = '';
  modelForm.value.withdrawAccount = '';
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      withdrawalAccountaddOrUpdateWithdrawAccountApp(modelForm.value).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    })
    .catch((err) => {});
}
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-input) {
    height: 50rpx;
    padding: 0 12rpx !important;
  }
  :deep(.uv-form) {
    .no-border {
      .uv-form-item {
        border-bottom: none;
      }
    }
    .uv-form-item {
      font-size: 28rpx;
      margin: 0 32rpx;
      border-bottom: 2rpx solid #e4e4e4;
      .uv-form-item__body {
        padding: 30rpx 0;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
